{% extends 'base.html' %}

{% block css%}
<style type="text/css">
  i {
    font-size: 24px;
  }

  .gray_led {
    color: #ccc;
  }

  .red_led {
    color: #ff0000;
  }

  .green_led {
    color: #52D017;
  }
</style>
{% endblock %}

{% block body%} 
<div class="row">
    <div class="col-md-8">
<!--       <h1>Led</h1> -->

          <table class="table table-hover table-condensed">
            {% for led_item in led_items %}
            <tr>
              <td style="font-size: 12px">
                {{ led_item[0] }}
              </td>
              <td>
                <i id='{{ led_item[0] }}' class='glyphicon glyphicon-asterisk gray_led'>
                </i>
              </td>
       

              <td style="font-size: 12px; color:#ccc">
                {{ led_item[1] }}
              </td>
            </tr>
            {% endfor %}
          </table>
    </div>
  
</div>
{% endblock %}

{% block js%} 
{{ super() }}
<script type="text/javascript">


    $(document).ready(function(){
        led_update();
      
        function led_update()
        {
          get_leds();
          t = setTimeout(led_update, 150);
        }


        function get_leds()
        {
            url = "/api/get_leds"
            $.get(url, function(data, status){
                console.log(data);
                d = JSON.parse(data);
                $.each(d,function(index,value){
                    //alert(index + ' --->' + value)
                    if(value == 1)
                    {
                       $("#"+index).removeClass();
                       $("#"+index).addClass("glyphicon glyphicon-asterisk green_led");
                    } 
                    else
                    {
                      $("#"+index).removeClass();
                      $("#"+index).addClass("glyphicon glyphicon-asterisk gray_led");
                    }   
                });
            });
        }
    });

</script>
{% endblock %}